<link href="/assets/home/css/order.css" rel="stylesheet" />
<!-- 引入mescroll -->
<link rel="stylesheet" href="/assets/home/mescroll/mescroll.min.css">
<script src="/assets/home/mescroll/mescroll.min.js"></script>

<!-- 头部 -->
<div class="top_div">
  <img src="/assets/home/images/bac.jpg" class="top_img">
  <div class="userInfo">
    <img class="uPic" src="{$LoginUser['avatar_text']}" /><br />
    <span class="uBalance">{$LoginUser['nickname']}</span>
  </div>
</div>

<!-- tab页切换 -->
<div class="page__bd">
  <div class="weui-tab">
    <div class="weui-tab__panel">
      <div class="o1" id="orderlist">
        <ul style="padding: 0;"></ul>
      </div>
    </div>
  </div>
</div>



<script>

  // 定义页码
  let page = 1;
  let limit = 2;

  var mescroll = new MeScroll("orderlist", {
    down: {
      callback: downCallback, //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
      auto: false
    },
    up: {
      callback: upCallback, //上拉加载的回调
      auto: true,
      page: {
        size: limit //每页数据条数,默认10
      },
      toTop: {
        //回到顶部按钮
        src: "/assets/img/mescroll-totop.png", //图片路径,默认null,支持网络图
        offset: 100 //列表滚动1000px才显示回到顶部按钮	
      },
      empty: {
        //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
        warpId: "typelist", //父布局的id (1.3.5版本支持传入dom元素)
        tip: "暂无相关数据~" //提示
      },
    }
  });

  // 下拉刷新的回调
  function downCallback() {
    // 处理方式一: 重置mescroll内部变量(如mescroll.num=1和mescroll.hasNext=true), 自动触发upCallback
    mescroll.resetUpScroll()
    $("#orderlist>ul").html('')
  }

  //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
  async function upCallback(curent) {
    page = curent.num,
      limit = curent.size

    let data = {
      page: page,
      limit: limit
    }

    $.ajax({
      type: "POST",
      url: `{:url('home/business/record')}`,
      data: data,
      dataType: "json",
      success: function (result) {
        if (result.code == 1) {
          let list = result.data.list
          let count = result.data.count
          mescroll.endBySize(list.length, count);
          getListData(list)
        } else {
          mescroll.endBySize(0, 0);
        }
      }
    })
  }


  // 渲染列表
  function getListData(data) {
    data.forEach((item) => {

      let str = `
        <div class="weui-form-preview">
            <div class="weui-form-preview__hd">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">消费金额</label>
                    <em class="weui-form-preview__value">¥${item.total}</em>
                </div>
            </div>
            <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">消费描述</label>
                    <span class="weui-form-preview__value">${item.content}</span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">消费时间</label>
                    <span class="weui-form-preview__value">${item.createtime}</span>
                </div>
            </div>
        </div>
        <br />
      `

      //   console.log(str);
      $("#orderlist>ul").append(str);
    })
  }
</script>